<template>
<div class="wrap">
  <div class="gd-wrap">
    <div class="gd-top">
      <a class="gd-top-left" :href="optionShop.skuUrl">
        <img v-lazy="optionShop.skuImage" :key="optionShop.skuImage"/>
      </a>
      <div class="gd-top-right">
        <div class="gd-top-name">{{optionShop.skuName}}</div>
        <div class="gd-top-des" v-show="optionShop.reason!=null && optionShop.reason.length!= 0">推荐理由：{{optionShop.reason}}</div>
        <!-- 价格信息 -->
        <div class="gd-msg">
          <div class="gd-msg-tips">
            <div class="gd-tips-item" v-for="(tipItem,tipIndex) in optionShop.tags" :key="tipIndex" :class="getColors(tipIndex)">{{tipItem.tagName}}</div>
          </div>
          <div class="gd-msg-view gd-msg-view-line">
            <div class="gd-msg-left">
              <div class="name">工厂价</div>
              <div class="price">¥<span>{{optionShop.ratePrice}}</span></div>
              <div class="original">¥{{optionShop.price}}<div class="original-line"></div> </div>
            </div>
            <div class="gd-msg-right">
              <div class="name">折扣</div>
              <div class="price">{{optionShop.disCount}}折</div>
            </div>
          </div>
            <!-- <div class="gd-msg-view"> -->
              <!-- <div class="gd-msg-left">
                <div class="name">佣金</div>
                <div class="price">¥<span>{{optionShop.commission}}</span></div>
              </div>
              <div class="gd-msg-right">
                <div class="name">佣金比例</div>
                <div class="commission-rate">{{optionShop.commissionRate}}<span>%</span></div>
              </div> -->
            <!-- </div>  -->
        </div>
        <!-- 销量 库存 热推 -->
        <div class="gd-sales">
          <div class="gd-sales-item">
            <span class="gd-sales-item-name">月销</span>
            <span class="gd-sales-item-value">{{optionShop.monthSales}}</span>
          </div>
          <div class="gd-sales-line"></div>
          <div class="gd-sales-item">
            <span class="gd-sales-item-name">库存</span>
            <span class="gd-sales-item-value">{{optionShop.skuNum}}</span>
          </div>
          <div class="gd-sales-line"></div>
          <div class="gd-sales-item">
            <span class="gd-sales-item-value">{{optionShop.spreadNum}}</span>
            <span class="gd-sales-item-name">人热推中</span>
          </div>
        </div>
        <div class="count-down">
          <img class="count-down-img" src="../assets/images/h-time-icon.png" alt="">
          <p class="count-down-time">还剩 : {{d}}天 {{h}}时 {{m}}分 {{s}}秒</p>
        </div>
        <div class="my-option-goods" style="display:flex">
          <div  @click="choiceShop(1)" class="gd-top-btn" v-if="optionShop.spread == '0'">我要选货</div>
          <div  @click="choiceShop(2)" class="gd-top-btn" v-if="optionShop.entrust=='0' && optionShop.spread == '1'">购买寄样</div>
          <div  @click="choiceShop(3)" class="gd-top-btn" v-if="optionShop.spread =='1'">取消选货</div> 
          <!-- 0 是立即抢购 1 和 预售时间小于等于当前时间 -->
          <div  
            @click="choiceShop(4,optionShop.id)" 
            class="rush-purchase"
            v-if="optionShop.advance=='0' || (optionShop.advance=='1' &&  Number(optionShop.advanceTime) <= optionShop.now && optionShop.advanceTime!=null)" 
          >立即抢购</div>
        </div>
      </div>
    </div>
    <div class="gd-bottom">
      <div class="gd-bottom-title">
        <p :class="goodsIndex === 0 ? 'gd-p-active' : ''" @click="toggleGoods(0)">商品详情</p>
        <p :class="goodsIndex === 1 ? 'gd-p-active' : ''" @click="toggleGoods(1)">直播脚本</p>
      </div>  
      <div class="gd-bottom-list" v-show="goodsIndex === 0">
        <div class="gd-bottom-center" v-for="(item,index) in imgData" :key="index">
          <img v-lazy="item" :key="item">
        </div>
      </div>
      <div class="gd-bottom-list" v-show="goodsIndex === 1">
        <div class="gd-bottom-txt">
          <div class="gd-bottom-txt-item" v-for="(item, index) in scriptData" :key="index">
            <div class="title">{{item.title}}</div>
            <div class="method">{{item.methods}}</div>
            <div class="feel">{{item.feel}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
</template>
<script>
export default {
  async fetch({store}) {
   await store.commit('setInterIndex', 3) //保存顶级导航的路由状态 ，这个已经修改
  },
  layout: 'internalouts',
  computed:{
    goodsId(){
      return this.$route.query.id //获取到商品ID
    },
    getColors() {
      return function(index){
        let type = index % 4
        return {
          'goods-tip-bg1' : type === 0,
          'goods-tip-bg2' : type === 1,
          'goods-tip-bg3' : type === 2,
          'goods-tip-bg4' : type === 3
        }
       }
    }
  },
  components: {
  },
  data() {
    return {
      goodsIndex: 0,
      scriptData:[ // 脚本数据
        {
          title: '0-1min聚人',
          methods: '营销方法：不断包装、渲染产品与品牌的产地、工艺、背景等，但不说具体产品，引发观众好奇，吸引观看。与街头表演聚人，吸引路人围观，后续卖货同理。',
          feel: '观众心理感受：卖的到底是啥？瞧瞧？'
        },
        {
          title: '1-2min留客',
          methods: '营销方法：通过神秘大礼、现场抽奖等留住观众不转台。',
          feel: '观众心理感受：看看能不能中个奖？'
        },
        {
          title: '2-6min锁客',
          methods: '营销方法：通过大量模拟产品使用场景，激发用户需求。',
          feel: '观众心理感受：是啊，这些场景我都经历过，不用挺麻烦，用了好像确实挺方便？'
        },
        {
          title: '6-10min举证',
          methods: '营销方法：通过专家证言、权威认证、产品试验等证明产品能满足观众需求。',
          feel: '观众心理感受：这东西好像还不错？'
        },
        {
          title: '10-13min说服',
          methods: '营销方法：通过竞品分析、产品对比等打消观众疑虑，帮观众做选择。',
          feel: '观众心理感受：性价比挺高，可以试试？'
        },
        {
          title: '13-14min催单',
          methods: '营销方法：通过礼品赠送、折扣礼金、增值服务等引诱观众下单。',
          feel: '观众心理感受：有优惠，赶紧买！'
        },
        {
          title: '14-15min逼单',
          methods: '营销方法：通过高频的原价与现价对比、活动期限、名额紧张等反复提醒用户下单。',
          feel: '观众心理感受：买了占便宜，不买没机会了。'
        }
      ],
      optionShop:{}, //我要选货的数据
      imgData:[], //商品详情的图片
      tipsList:[
        {tagName:'京东热卖',},
        {tagName:'京东热卖',},
        {tagName:'京东热卖',},
        {tagName:'京东热卖',},
      ],
			d:'0',
			h: '0',
			m: '0',
			s: '0',
      end:'',
      now:'',
      timer:null,
    }
  },
  methods: {
    formatDate(now) { //时间戳日期格式化
      var year=now.getFullYear();  //取得4位数的年份
      var month=now.getMonth()+1;  //取得日期中的月份，其中0表示1月，11表示12月
      var date=now.getDate();      //返回日期月份中的天数（1到31）
      var hour=now.getHours();     //返回日期中的小时数（0到23）
      var minute=now.getMinutes(); //返回日期中的分钟数（0到59）
      var second=now.getSeconds(); //返回日期中的秒数（0到59）
      return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second; 
    },
   	countTime() {
      // 结束时间戳
      const end = this.end;
      //定义当前时间戳
      this.now = this.now + 1000; //后端给的定时器是死的，每次加一秒就可以自动变化了
      // 做判断当倒计时结束时都为0
      if (this.now >= end) {
        this.d = 0
        this.h = 0
        this.m = 0
        this.s = 0
        return
      }
      // 用结束时间减去当前时间获得倒计时时间戳
      const msec = end - this.now
      let d = parseInt(msec / 1000 / 60 / 60 / 24) //算出天数
      let h = parseInt(msec / 1000 / 60 / 60 % 24) //算出小时数
      let m = parseInt(msec / 1000 / 60 % 60) //算出分钟数
      let s = parseInt(msec / 1000 % 60) //算出秒数
      //给数据赋值
      this.d = d
      this.h = h > 9 ? h : '0' + h
      this.m = m > 9 ? m : '0' + m
      this.s = s > 9 ? s : '0' + s
    },
    toggleGoods(index) {
      this.goodsIndex = index
    },
    choiceShop(index,goodsId){
      if(index === 1){
        this.spreadGoods() //调用我要选货的接口
      }else if(index === 2){
        this.sendEntrustGoods();
      }else if(index ===3) {
        this.cancelSpreadGoods();
      }else if(index ===4){
        this.$router.push({
          path:'/placeOrder',
          query:{goodsId:goodsId}
        })
      }
    },
    getData(){ //商品详情
      let params = {
        id:this.goodsId //拿到对应的商品ID,传给后台
      }
      this.$axios.$post('goodsDetail',params).then(res => {
        if(res.status === 200 ){
          this.optionShop = res.obj;
          //字符串剔除最后一位；
          var imgs = res.obj.skuIntroduceImg.substring(0,res.obj.skuIntroduceImg.length-1);
          this.imgData = imgs.split(',');
          this.end = res.obj.endTime;
          this.now = res.obj.now
           // 使用定时器 然后使用递归 让每一次函数能调用自己达到倒计时效果
          this.timer = setInterval(()=> {
            this.countTime();
          }, 1000)
        }else{
          this.$message.warning(res.msg)
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
        this.loading = false;
      })
    },
    spreadGoods(){ //商品详情-我要选货
      let params = {
        goodsId:this.goodsId //拿到对应的商品ID
      }
      this.$axios.$post('spreadGoods',params).then(res => {
        if(res.status === 200 ){
          this.optionShop.spread='1'; //我要选货把spread变为1
          this.optionShop.entrust ='0'; //把寄样管理entrust变为0
        }else{
          this.$message.warning(res.msg)
        }
      })
      .catch(error => {
        this.$message.warning('请求失败');
      })
    },
    sendEntrustGoods(){ //商品详情-购买寄样
      let params = {
        goodsId:this.goodsId //拿到对应的商品ID,传给后台
      }
      this.$axios.$post('sendEntrustGoods',params).then(res => {
        if(res.status === 200 ){
          this.$router.push({
            path:'/pickGoodsHall/goodsManagement',
          }) 
        }else if(res.status === 500 ){
          this.$message.warning(res.msg);
        }else {
          this.$router.replace('/user')
        }
      })
      .catch(error => {
        this.$message.warning('请求失败')
      })
    },
    cancelSpreadGoods(){ //取消选货
      let params = {
        goodsId:this.goodsId //拿到对应的商品ID,传给后台
      }
      this.$axios.$post('cancelSpreadGoods',params).then(res => {
        if(res.status === 200 ){
          this.$message({
            type:'success',
            message:res.msg,
            duration:1000,
          })
          // this.$message.success(res.msg);
          this.optionShop.spread='0'; //取消选货把spread变为0
        }else{
          this.$message.warning(res.msg);
        }
      })
      .catch(error => {
        this.$message.warning('请求失败')
      })
    },
  },
  mounted() {
    document.getElementsByTagName("body")[0].style.background = '#fff'
    this.getData() //调用商品详情的接口
  },
  beforeDestroy(){    //离开
    clearInterval(this.timer)
    this.timer = null; //设置为null
    document.getElementsByTagName("body")[0].style.background = '#f4f4f4'
  },
}
</script>

<style scoped>
  .wrap { 
    background: #fff;
  }
  .gd-wrap {
    width: 1200px;
    margin: 0 auto;
    padding-top: 20px;
  }
  .gd-top {
    display: flex;
    align-items: center;
  }
  .gd-top-left {
    width: 400px;
    height: 400px;
  }
  .gd-top-left img {
    width: 100%;
    height: 100%;
  }
  .gd-top-right {
    flex: 1;
    margin-left: 50px;
  }
  .gd-top-name {
    color: #333;
    font-size: 18px;
  }
  .gd-top-des {
    font-size: 16px;
    color: #0096E6;
    line-height: 20px;
    margin-top: 13px;
  }
  .gd-msg {
    width: 720px;
    height: 180px;
    margin-top: 15px;
    background: url('../assets/images/goods-detail-bg.png') no-repeat;
    padding-left: 30px;
  }
  .gd-msg-tips {
    width: 720px;
    height: 60px;
    display: flex;
    align-items: center;
  }
  .gd-tips-item {
    height: 26px;
    line-height: 26px;
    border-radius: 0 13px 0 13px;
    font-size: 14px;
    color: #fff;
    padding: 0 12px;
    margin-right: 12px;
  }
  .goods-tip-bg1 {
    background: linear-gradient(to right, #F84141, #FC8142);
  }
  .goods-tip-bg2 {
    background: linear-gradient(to right, #18A5FC, #475DFC);
  }
  .goods-tip-bg3 {
    background: linear-gradient(to right, #E751F3, #5F80F7);
  }
  .goods-tip-bg4 {
    background: linear-gradient(to right, #F36084, #F383DB);
  }
  .gd-msg-view {
    width: 460px;
    height: 65px;
    display: flex;
    align-items: center;
  }
  .gd-msg-view-line {
    border-bottom: 1px dashed #e3e3e3;
  }
  .gd-msg-left {
    width: 260px;
    height: 65px;
    display: flex;
    align-items: center;
  }
  .gd-msg-left .name {
    width: 70px;
    font-size: 16px;
    color: #666666;
  }
  .gd-msg-left .price {
    font-size: 18px;
    color: #DE1E1E;
  }
  .gd-msg-left .price span {
    font-size: 24px;
    font-weight: bold;
    color: #DE1E1E;
  }
  .gd-msg-left .original {
    margin-left: 10px;
    font-size: 16px;
    color: #999;
    position: relative;
  }
  .original-line {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 40px;
    height: 2px;
    background: #999;
  }
  .gd-msg-right {
    flex: 1;
    height: 65px;
    display: flex;
    align-items: center;
  }
  .gd-msg-right .name {
    width: 70px;
    font-size: 16px;
    color: #666666;
  }
  .gd-msg-right .price {
    font-size: 24px;
    color: #DE1E1E;
  }
  .gd-msg-right .commission-rate {
    font-size: 24px;
    color: #0096E6;
  }
  .gd-msg-right .commission-rate span {
    font-size: 18px;
    color: #0096E6;
  }
  .gd-sales {
    margin-top: 12px;
    width: 750px;
    height: 48px;
    background: url('../assets/images/goods-detail-bg.png') no-repeat;
    display: flex;
    align-items: center;
  }
  .gd-sales-item {
    margin-right: 40px;
    margin-left: 40px;
  }
  .gd-sales-item-name {
    font-size: 16px;
    color: #666;
  }
  .gd-sales-item-value {
    font-size: 16px;
    color: #DE1E1E;
  }
  .gd-sales-line {
    width: 1px;
    height: 14px;
    background: #D1D1D1;
  }
  .my-option-goods{
    display:flex;
  }
  .gd-top-btn {
    width: 150px;
    height: 44px;
    background: #0096e6;
    text-align: center;
    color: #fff;
    line-height: 44px;
    font-size: 18px;
    border-radius: 100px;
    margin-top: 24px;
    user-select: none;
    cursor: pointer;
    margin:24px 10px 0;
  }
  /* .gd-disabled {
    width: 150px;
    height: 44px;
    text-align: center;
    border:1px solid gainsboro;
    box-sizing:border-box;
    line-height: 44px;
    font-size: 18px;
    border-radius: 100px;
    margin-top: 24px;
    user-select: none;
    background-color: gainsboro !important; 
		cursor: not-allowed !important;
		color:#ffffff !important;
    pointer-events:none;
  } */
  .gd-top-btn:hover{
    background:#66B1FF;
  }
  .gd-bottom {
    margin-top: 40px;
    padding-bottom: 100px;
    background: #f5f6f8;
    border-radius: 8px;
    overflow: hidden;
  }
  .gd-bottom-title {
    width: 100%;
    height: 44px;
    border-bottom: 1px solid #0096e6;
    background: #f5f6f8;
    display: flex;
  }
  .gd-bottom-title p {
    font-size: 16px;
    color: #666;
    width: 120px;
    line-height: 44px;
    height: 44px;
    text-align: center;
    cursor: pointer;
  }
  .gd-p-active {
    background: #0096e6;
    color: #fff !important;
  }
  .gd-bottom-list {
    margin-top: 20px;
    background: #f5f6f8;
  }
  .gd-bottom-center{
    width:750px;
    margin:0 auto;
  }
  .gd-bottom-center img{
    width: 100%;
    display:block;
  }
  .gd-bottom-txt {
    margin-left: 25px;
  }
  .gd-bottom-txt-item {
    margin-bottom: 35px;
    font-size: 14px;
    color: #666;
  }
  .gd-bottom-txt-item .title {
    color: #333;
  }
  .gd-bottom-txt-item .method {
    margin-top: 15px;
    line-height: 1.5;
  }
  .gd-bottom-txt-item .feel  {
    margin-top: 5px;
  }
  .count-down {
    display:flex;
    margin:20px 0 0 0;
    align-items: center;
    color:#666666;
  }
  .count-down-img{
    width:18px;
    height:18px;
  }
  .count-down-time {
    margin-left:12px;
  }
  .rush-purchase{
    width: 150px;
    height: 44px;
    background-color: #f53917;
    text-align: center;
    color: #fff;
    line-height: 44px;
    font-size: 18px;
    border-radius: 100px;
    user-select: none;
    cursor: pointer;
    margin: 24px 10px 0;
  }
</style>
